<template>
	<view class="root-lay">
		<view class="head-lay flex-h">
			<view class="head-title">{{headTitle}}</view>
			<view class="head-right flex-h" v-show="isOptEnable">
				<view class="head-tool" @click="onDelClick">删除</view>
				<view class="head-tool" @click="onRenameClick">重命名</view>
			</view>
		</view>
		<view class="content-lay">
			<view class="step-1" v-if="showType == 0">
				<view class="table-lay">
					<vTable :columns="headData" :list="contentData" :height="50" selection="single"
						@on-selection-change="onSelectionChange" border-color="#6f6f6f"></vTable>
				</view>
			</view>

			<view class="step-2" v-if="showType == 1">
				<view class="form-lay">
					<view class="info-line flex-h">
						<view class="info-title">装置名称：</view>
						<view class="info-value" style="background: #FDFACC; width: 100%;">{{selectTableItem.name}}
						</view>
					</view>

					<view class="info-line flex-h">
						<view class="info-title" style="width: 20%;">図面番号：</view>
						<view class="info-value"style="width: 30%;">{{selectTableItem.faceId}}</view>
						<view class="info-title"style="width: 20%;">予定日：</view>
						<view class="info-value"style="width: 30%;">{{selectTableItem.checkDate}}</view>
					</view>

					<view class="draw-area">
						<image class="draw-img" src="../../../static/templateHL.png"></image>
					</view>

					<view class="input-area flex-v">
						<view class="info-title">検査結果</view>
						<!-- <view class="input-str"></view> -->
						<textarea class="input-str" placeholder-style="color:#7f7f7f" placeholder="请输入检查结果"/>
					</view>

				</view>
			</view>
		</view>

		<view class="bottom-lay flex-h">
			<view class="btn" @click="onCancelClick">キャンセル</view>
			<view class="btn" style="color: #1890FF; margin-left: 1upx;" @click="onConfirmClick">野帳</view>
		</view>

		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="输入内容" :value="renameDefaultStr" placeholder="请输入内容"
				@confirm="renameConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import vTable from "@/components/no-bad-table/table.vue";
	import selectData from "@/common/thick_show_data.js";
	export default {

		components: {
			vTable
		},
		data() {
			return {
				headTitle: "野帳添付",

				showType: 0, // 0:table  1:form

				headData: [],
				contentData: [],

				isOptEnable: false,
				selectTableItem: null,

				renameDefaultStr: '',
			}
		},

		watch: {
			selectTableItem(val) {
				if (this.selectTableItem == null) {
					this.isOptEnable = false;
				} else {
					this.isOptEnable = true;
				}
			},

			showType(val) {
				this.headTitle = (val == 0 ? "野帳添付" : "検査結果記録")
			}

		},

		mounted() {
			this.headData = selectData.wildAccountTableData.headData;
			this.contentData = selectData.wildAccountTableData.contentData;
		},

		methods: {
			onSelectionChange(e) {
				if (e.new.item != null)
					this.selectTableItem = e.new.item;
				else
					this.selectTableItem = null;
			},

			onCancelClick() {
				this.$emit("closePopup");
			},

			onConfirmClick() {
				if (this.selectTableItem == null) {
					uni.showToast({
						title: "请选择一条数据",
						icon: null
					})
					return;
				}

				this.showType = 1;
			},

			onDelClick() {
				if (this.selectTableItem == null) {
					uni.showToast({
						title: "请选择一条数据",
						icon: null
					})
				} else {
					this.removeTableItem(this.selectTableItem.id);
					this.selectTableItem = null;
				}
			},

			onRenameClick() {
				if (this.selectTableItem == null) {
					uni.showToast({
						title: "请选择一条数据",
						icon: null
					})
				} else {
					// 	this.renameTableItem(this.selectTableItem.id);
					this.renameDefaultStr = this.selectTableItem.fileName;
					this.$refs.dialogInput.open();
				}
			},

			removeTableItem(inId) {
				this.contentData.forEach(e => {
					if (e.id == inId) {

						var i = this.contentData.indexOf(e);
						if (i >= 0) {
							this.contentData.splice(i, 1);
						}
					}
				})
			},

			renameConfirm(e) {
				console.log(e);
				this.selectTableItem.fileName = e;
			}
		}
	}
</script>

<style scoped lang="scss">
	.root-lay {}

	.head-lay {
		height: 35upx;
		position: relative;
		padding: 5upx;

		.head-title {
			margin: 0 auto;
			font-size: 25upx;
			font-weight: bold;
			color: #333333;
		}

		.head-right {
			position: absolute;
			right: 0;
			height: 100%;
			align-items: center;

			.head-tool {
				font-size: 18upx;
				color: #333333;
				margin-right: 10upx;
			}
		}
	}

	.content-lay {
		height: calc(50%);
		// background-color: #3F536E;
		border: 1px solid #E8E8E8;
		padding: 15upx;
	}

	.table-lay {
		padding: 1upx;
	}

	.bottom-lay {
		width: 100%;
		position: fixed;
		bottom: 0upx;
		align-items: center;
		background-color: #9f9f9f;
		padding: 1upx;

		.btn {
			width: 50%;
			height: 100%;
			background-color: #fff;
			color: #000;
			padding: 10upx;

			text-align: center;
		}
	}

	.form-lay {
		padding: 1upx;
		width: 55vw;
		position: relative;
		
		.info-line {
			align-items: center;
			width: 100%;
			margin-bottom: 10upx;
			
			.info-title {
				width: 40%;
				font-size: 18upx;
			}
			
			.info-value {
				border-radius: 1px;
				width: 60%;
				border: 1px solid #CFD3D5;
				padding: 5upx;
				font-size: 18upx;
			}
		}
		
		.draw-area {
			padding: 10upx;
			border: 1px solid #CFD3D5;
			
			.draw-img {
				width: 100%;
				height: 30vh;
			}
		}
		
		.input-area {
			margin-top: 10upx;
			
			.input-str {
				width: calc(100% - 10upx);
				margin-top: 10upx;
				padding: 15upx;
				border: 1px solid #CFD3D5;
			}
		}
	}
</style>
